<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<nav class="flex justify-center bg-base-200 w-full">
    <div class="navbar sticky top-0 z-50 mx-32">
        <div class="flex-1">
            <a class="btn btn-ghost text-xl" href="<c:url value="/"/>">${applicationScope.appTitle} - 影院</a>
            <div class="tabs tabs-boxed bg-transparent hidden sm:flex">
                <a class="tab tab-active">首页</a>
                <a class="tab">电影</a>
                <a class="tab">电视剧</a>
                <a class="tab">综艺</a>
                <a class="tab">动漫</a>
            </div>
        </div>
        <div class="flex-none gap-4">
            <div class="form-control justify-between inline-block">
                <label for="search-input">
                    <input id="search-input" class="input input-bordered w-24 md:w-auto" type="text"
                           placeholder="搜索"/>
                </label>
                <button class="btn btn-ghost inline-block">Query</button>
            </div>

            <div data-tip="历史记录"
                 class="w-10 rounded-full history-hover inline-block hover:cursor-pointer tooltip hover:tooltip-open tooltip-bottom">
                <img alt="History" src="<c:url value="/assets/img/svg/history.svg"/>"/>
            </div>
            <!-- User Avatar -->
            <div class="dropdown dropdown-end">
                <c:choose>
                    <c:when test="${sessionScope.isLogin && sessionScope.isAdmin}">
                        <!-- 条件为 true 时的内容 -->
                    </c:when>
                    <c:when test="${sessionScope.isLogin && !sessionScope.isAdmin}">
                        <!-- 条件为 false 且 isLogin 为 true 时的内容 -->
                        <div tabindex="0" role="button" class="btn btn-circle avatar">
                            <div class="w-10 rounded-full ring-offset-base-100 ring ring-1 ring-black">
                                <img alt="User Avatar" src="<c:url value="/assets/img/svg/visited-person.svg"/>"/>
                            </div>
                        </div>
                        <ul tabindex="0"
                            class="menu menu-sm dropdown-content mt-2 z-[1] p-2 shadow bg-base-100 rounded-box w-32 items-center">
                            <li><a>我的收藏</a></li>
                            <li><a>观看历史</a></li>
                            <li><a>退出登录</a></li>
                        </ul>
                    </c:when>
                    <c:otherwise>
                        <div tabindex="0" role="button" class="btn btn-circle avatar">
                            <div class="w-10 rounded-full ring-offset-base-100 ring ring-1 ring-black">
                                <img alt="User Avatar" src="<c:url value="/assets/img/svg/visited-person.svg"/>"/>
                            </div>
                        </div>
                        <ul tabindex="0"
                            class="menu menu-sm dropdown-content mt-2 z-[1] p-2 shadow bg-base-100 rounded-box w-32 items-center">
                            <li><a href="<c:url value="/view/auth/login.jsp"/>">前往登录</a></li>
                            <li><a>不是管理员</a></li>
                            <li><a>退出登录</a></li>
                        </ul>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
    </div>
</nav>

<script>
    // 点击 tab 时切换样式和内容
    $(".tab").click(function () {
        let index = $(this).index(); // 获取点击的 tab 索引
        $(".tab").removeClass("tab-active"); // 移除所有 tab 的激活类
        $(this).addClass("tab-active"); // 添加点击 tab 的激活类

        // // 隐藏所有 tab 内容
        $(".tab-content").addClass("hidden");

        // // 显示对应 tab 内容
        // $(".tab-content").eq(index).removeClass("hidden");
    });
</script>